<template>
  <div class="bottom_box">
    <table cellspacing="0" cellpadding="0" align="center" style="background: none; ">
      <tr>
        <td>
          <a href="#" class="positioning" title="定位" @click=""></a>
          <p>定位</p>
        </td>
        <td>
          <a href="#" class="search" title="搜索" @click="searchFunction()"></a>
          <p>搜索</p>
        </td>
        <td>
          <a href="#" class="layer_control" title="图层控制" @click=""></a>
          <p>图层控制</p>
        </td>
        <td>
          <a href="#" class="Multiple_comp" title="多图对比"></a>
          <p>多图对比</p>
          <!--多图对比-->
        <!--  <ul id="MultiMapChangeDiv">
            <li class="service-item fl" @click="">
              <img src="./images/102.png" class="service-icon"
                   onmouseover="this.src = './images/102-01.png'"
                   onmouseout="this.src = './images/102.png'" />
              <span>双图对比</span>
            </li>
            <li class="service-item fl"
                style="border-style: solid; border-width: 1px; border-color: rgb(215, 214, 216); padding: 5px; background-color: rgba(255, 255, 255, 0.53);  border-style: solid; border-radius: 5px; cursor: pointer;"
                @click="">
              <img src="./images/101.png" class="service-icon"
                   onmouseover="this.src = './images/101-01.png'"
                   onmouseout="this.src = './images/101.png'" />
              <span>四图对比</span>
            </li>
            <div class="clr"></div>
          </ul>-->
        </td>
        <td>
          <a href="#" class="map_output" title="地图输出"></a>
          <p>地图输出</p>
        </td>
        <td>
          <a href="#" class="measure" title="测量工具" @click=""></a>
          <p>测量工具</p>
          <!--测量-->
         <!-- <ul id="MeasuringUl" class="">
            <li class="fl">
              <img id="MeasuringDistance" src="./images/73.png"
                   onmouseover="this.src = './images/73-01.png'"
                   onmouseout="this.src = './images/73.png'" @click="">
              <span>测量距离</span>
            </li>
            <li class="fl">
              <img id="MeasuringArea" src="./images/75.png"
                   onmouseover="this.src = './images/75-01.png'"
                   onmouseout="this.src = './images/75.png'" @click="">
              <span>测量面积</span>
            </li>
            <div class="clr"></div>
          </ul>-->
        </td>
        <td>
          <a href="#" class="dataload" title="数据加载" @click=""></a>
          <p>数据加载</p>
        </td>
        <td>
          <a href="#" class="clr_icon" title="清除图标"></a>
          <p>清除图标</p>
        </td>
        <td>
          <a href="#" class="clr_data" title="清除数据"></a>
          <p>清除数据</p>
        </td>
        <td>
          <a href="#" class="full" title="全屏"></a>
          <p>全屏</p>
        </td>
        <td>
          <a href="#" class="helper" title="帮助"></a>
          <p>帮助</p>
        </td>
      </tr>
    </table>
    <!--搜索框的弹出框-->
    <Modal
      v-model="searchModal"
      title="搜索" draggable footer-hide>
       <Search></Search>
    </Modal>
  </div>
</template>
<script>
  import Search from './Search'
  export default {
    components:{
      Search
    },
    data(){
      return{
        searchModal:false
      }
    },
    methods:{
      searchFunction:function () {
        this.searchModal = !this.searchModal;
      }
    }
  }
</script>
<style>

  .bottom_box table{
      height: 60px;
    padding-bottom: 10px;
    width: 678px;
    text-align: center;
    margin: auto;
    border-collapse: collapse;
    border-spacing: 0;
    color: #000000;
    font-size: 12px;
    }
  .bottom_box table tr td a {
    display: block;
    float: left;
    margin: 0 10px;
    margin-bottom: 6px;
  }
  .bottom_box table td a, .bottom_box table td a:hover {
    opacity: 1.0;
    filter: alpha(opacity=53);
  }
  .bottom_box table tr td p {
    margin: 5px 12px 0 0;
  }
  .positioning,.search,.layer_control,.Multiple_comp,.map_output,.measure,.dataload,.clr_icon,.clr_data,.full,.helper{
    width: 44px;
    height: 30px;
    opacity: 1.0;
    filter:alpha(opacity=100);
  }
  .positioning{
    background:url(../images/64.png) no-repeat;
  }
  .search{
    background:url(../images/67.png) no-repeat;
  }
  .layer_control{
    background:url(../images/69.png) no-repeat;
  }
  .Multiple_comp{
    background:url(../images/71.png) no-repeat;
  }
  .map_output{
    background:url(../images/131.png) no-repeat;
  }
  .measure{
    background:url(../images/MeasuringTool.png) no-repeat;
  }
  .dataload{
    background:url(../images/79.png) no-repeat;
  }
  .clr_icon{
    background:url(../images/84.png) no-repeat;
  }
  .clr_data{
    background:url(../images/86.png) no-repeat;
  }
  .full{
    background:url(../images/88.png) no-repeat;
  }
  .helper{
    background:url(../images/Helper.png) no-repeat;
  }
  .positioning:hover{
    background:url(../images/64-01.png) no-repeat;

  }
  .search:hover{
    background:url(../images/67-01.png) no-repeat;
  }
  .layer_control:hover{
    background:url(../images/69-01.png) no-repeat;
  }
  .Multiple_comp:hover{
    background:url(../images/70-01.png) no-repeat;
  }
  .map_output:hover{
    background:url(../images/131-01.png) no-repeat;
  }
  .measure:hover{
    background:url(../images/MeasuringTool-01.png) no-repeat;
  }
  .dataload:hover{
    background:url(../images/79-01.png) no-repeat;
  }
  .clr_icon:hover{
    background:url(../images/84-01.png) no-repeat;
  }
  .clr_data:hover{
    background:url(../images/86-01.png) no-repeat;
  }
  .full:hover{
    background:url(../images/88-01.png) no-repeat;
  }
  .helper:hover{
    background:url(../images/Helper-01.png) no-repeat;
  }
</style>
